<template>
  <div class="main_box">
    <mainNavbar></mainNavbar>
    <div class="content_background">
    <div class="content_wide_box">
      <div class="content_narrow_box">
        <!-- 信息种类、关键字 查找 -->
        <div class="info_choice_box">
          <div>
            <span>种类选择</span>
            <el-cascader
                v-model="searchInfo.catIdArray"
                :options="infoCat"
                :props="cascader_props"
                @change="handleInfoCat"
                placeholder="请选择信息种类"
                >
            </el-cascader>
            <el-input v-model="dataForm.key" placeholder="请输入关键字" ></el-input>
            <el-button @click="getInfo">搜索</el-button>
          </div>
        </div>
        <!-- 显示查询的 信息结果 -->
        <div class="info_box">
          <div>
              <mainContentInfoItem
                v-for='item in info' :key="item.infoId" 
                :infoData='item'
                @showBigImg="handlerShowBigImg"
              ></mainContentInfoItem>
          </div>
          <div v-if="pageData.totalCount === 0" class="span">没有找到相关结果</div>
        </div>
        <!-- 分页组件 -->
        <div class="main_page_box">
          <el-pagination
            @size-change="sizeChangeHandle"
            @current-change="currentChangeHandle"
            :current-page="pageData.currPage"
            :page-sizes="[5, 10, 20]"
            :page-size="pageData.pageSize"
            :total="pageData.totalCount"
            layout="total, sizes, prev, pager, next, jumper">
          </el-pagination>
        </div>
        <!-- 显示大图 -->
        <div>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="" />
          </el-dialog>
        </div>
      </div>
    </div>
    
    </div>
    <back-top ref="backTop"></back-top>
  </div>
</template>

<script>
import mainNavbar from './main-navbar'
import mainContentInfoItem from './main-content-info-item'
import backTop from '../common/back-top'
export default {
  components: {
      mainNavbar,
      mainContentInfoItem,
      backTop,
  },
  mounted() {
    // 获取信息种类
    this.getInfoCat();
    // 获取信息
    this.getInfo();
  },
  data() {
    return {
      dialogVisible: false,
      dialogImageUrl: "",
      infoCat: [
        {
          catId: 1,
          catName: '丢失物品',
        },
        {
          catId: 2,
          catName: '捡到物品',
        },
        {
          catId: 3,
          catName: '拼车',
        },
      ],
      cascader_props:{
        value:'catId',
        label:'catName',
        expandTrigger: 'hover',
      },
      searchInfo:{
        catIdArray: [],
        catId: 0,
        // key: '',
      },
      // infoStatus:[1,2,0,-1],
      // userId: "1",
      // useUserId: "1",
      // catId: "5"
      // page:{
      //   page: '0',
      //   limit: '5',
      //   sidx: 'create_time',
      //   order: 'desc', 
      //   key: '',
      // },
      dataForm:{
        key: ''
      },
      pageData: {
        totalCount: 0,
        pageSize: 5,
        currPage: 1,
        totalPage: 2,
      },
      info: [
        {
            infoId: 1,
            userId: 1,
            nickName: '张三',
            portrait: 'https://i1.hdslb.com/bfs/face/e0cc906bb531195e9ee9f3b575effdd2b056eaea.jpg',
            createTime: '2021/05/02 14:12:56',
            infoTitle: '拼车',
            infoAttrValueVos: [
                {
                    attrName: '目的地',
                    attrValue: '威海站',
                    type: 'selector',
                },{
                    attrName: '时间',
                    attrValue: '2021/05/02 14:12:56',
                    type: 'datetime',
                },{
                    attrName: '备注',
                    attrValue: '无',
                    type: 'textarea',
                }
                
            ],
            img:[
              'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
              'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
              'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
            ],
            commentNum: 8,
        },{
            infoId: 2,
            userId: 2,
            nickName: '李四',
            portrait: 'https://i1.hdslb.com/bfs/face/e0cc906bb531195e9ee9f3b575effdd2b056eaea.jpg',
            createTime: '2021/05/01 14:12:56',
            title: '丢失校园卡',
            infoAttrValueVos: [
                {
                    attrName: '物品名',
                    attrValue: '校园卡',
                    type: 'input',
                },{
                    attrName: '种类',
                    attrValue: '校园卡',
                    type: 'selector',
                },{
                    attrName: '地点',
                    attrValue: '位置',
                    type: 'input',
                }
                
            ],
            img: [],
            commentNum: 12,
        },
      ],
    }
  },
  methods: {
    // 显示大图
    handlerShowBigImg(url){
      this.dialogImageUrl = url;
      this.dialogVisible = true;
    },
    // 获取信息种类
    getInfoCat(){
        this.$http1({
            url: this.$http.adornUrl("/user/info/category/list/tree"),
            method: "get",
            // params: this.$http.adornParams({})
        }).then(({ data }) => {
            this.$message({
                type: "success",
                message: "成功获取到种类信息!",
            });
            this.infoCat = data.data;
        
        });
    },
    handleInfoCat(){
      let _catIdArray = this.searchInfo.catIdArray
      this.searchInfo.catId = _catIdArray[_catIdArray.length-1];
      this.getInfo()
    },
    getInfo(){
      var data =  {
        page:{
          page: ''+this.pageData.currPage,
          limit: ''+this.pageData.pageSize,
          sidx: 'create_time',
          order: 'desc', 
          key: this.dataForm.key,
        },
        infoStatus:[1,2,0,-1],
        // userId: this.currentUser.user.userId,
        userId: '0',
        useUserId: "-1",
        catId: this.searchInfo.catId === 0? '' : ''+this.searchInfo.catId,
      }
      this.$http1({
        url: this.$http.adornUrl("/user/info/list"),
        method: "post",
        data: this.$http.adornData(data, false)
      }).then(({ data }) => {
        if(data && data.code === 0){
          this.$message({
            type: "success",
            message: "成功获取到消息!",
          });
          this.info = data.page.list
          this.pageData.totalCount = data.page.totalCount
          this.pageData.totalPage = data.page.totalPage
        }else{
          this.info = []
          this.pageData.totalPage = 0
        }
        this.$nextTick(() => {
          this.$refs.backTop.backTop();
        })
        
      });
    },
    // 每页数
    sizeChangeHandle (val) {
      this.pageData.pageSize = val
      this.pageData.currPage = 1
      this.getInfo()
    },
    // 当前页
    currentChangeHandle (val) {
      this.pageData.currPage = val
      this.getInfo()
    },
  },
}
</script>

<style>
.main_box {

}
/* .content_background{
  background-image: url(http://localhost:88/api/user/test_pic/background_bili.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
} */
.content_wide_box {


  position: absolute;
  top: 60px;
  bottom: 0px;
  min-width: 980px;
  width: 100%;
  /* background: rgb(255, 255, 255); */
}
.content_narrow_box {
  width: 650px;
  height: 100%;
  margin: 0 auto;
  background: rgb(255, 255, 255);
}

/* === 种类选择和输入框 === */
.info_choice_box {
  background: #aaa;
  border-radius: 5px;
  margin-top: 5px;
  padding: 5px 0;
  
}
.info_choice_box span{
  margin: 0 5px 0 8px;
}

.info_choice_box .el-input{
  width: 240px
}
.info_box {
}
.info_box .span{
  background: #aaa;
  border-radius: 5px;
  font-size: 16px;
  color: #333;
  text-align: center;
  margin-top: 10px;
  padding: 10px 0;
}

/* === 底部分页 === */
.main_page_box{
  text-align:center;
  background: #aaa;
  border-radius: 5px;
  padding: 5px 0;
  /* margin-top: 15px; */
  margin: 15px 0;
}

/* === cascader滚动条显示问题 === */
.el-cascader__dropdown .el-scrollbar__wrap{
    overflow-x: hidden;
    overflow-y: hidden;
    width: 100%;
    height: 100%;
}
</style>